<template>
  <div
    class="group-3"
    :style="{ background: `url(${solutionImgUrl}) no-repeat`, 'background-size': '100% 100%' }"
  >
    <div class="group-mask"></div>
    <div class="group-content">
      <h1 class="group-title" data-aos="fade-up">解决方案</h1>
      <p class="group-desc" data-aos="fade-up" data-aos-delay="100">
        挖掘行业痛点，为企业提供全场景行
      </p>
      <div class="section-1 flex-row">
        <ul class="menu-1" data-aos="fade-up" data-aos-delay="200">
          <li
            v-for="(el, i) in solutionList"
            :key="i"
            :class="{ active: el.active }"
            @click="chooseMenu(el, i)"
          >
            {{ el.title }}
            <img :src="el.imgUrl" alt="" />
          </li>
        </ul>
        <div v-loading="loading" class="content-1">
          <h2 class="content-title" data-aos="fade-up">
            {{ showText.title }}
          </h2>
          <p class="content-desc" data-aos="fade-up" data-aos-delay="300">
            {{ showText.content }}
          </p>
          <div class="content-product" data-aos="fade-up" data-aos-delay="400">
            <span class="text-1"> 推荐产品： </span>
            <button v-for="(item, index) in showText.recommend" :key="index" class="content-btn">
              {{ item }}
            </button>
          </div>
          <ul class="content-list" data-aos="fade-up" data-aos-delay="500">
            <li class="list-1" @click="openDialog">获取方案</li>
            <li class="list-2"><router-link :to="toPath">了解方案详情</router-link></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <contact-dialog v-if="isContactShow" ref="contactRef" v-model="isContactShow" title="获取方案" />
</template>

<script setup>
import ContactDialog from '@/components/contactDialog.vue'

const $getAssetsImages = inject('$getAssetsImages')
const loading = ref(false)
const solutionImgUrl = ref($getAssetsImages('solution.png'))
const imgR = ref($getAssetsImages('ruan_jian.png'))
const imgZ = ref($getAssetsImages('zhi_zao.png'))
const imgN = ref($getAssetsImages('neng_yuan.png'))

const item0 = {
  title: '大宗建材行业数字化建设解决方案',
  content:
    '建材行业作为中国国民经济发展的重要支柱性产业之一，现阶段总体仍处于粗放式管理水平，缺乏有效的信息化管理，在转型过程中，存在着数据孤岛、杂乱分散等问题，导致运营效率低、成本控制难、综合效益低、成效不够突出。',
  recommend: ['链盈', '讯盈']
}
const item1 = {
  title: '能源行业供应链一体化解决方案',
  content:
    '能源是经济社会发展的基础和动力。如何通过前沿技术的运用，打通不同层级与不同行业间的数据壁垒，构建深入企业肌理的能源化工数字运营体系是每一家能源企业的必经考验。',
  recommend: ['链盈', '讯盈']
}
const item2 = {
  title: '软件企业数字化转型解决方案',
  content:
    '数字化转型从根本上改变了软件行业的动态。 数字化转型不仅意味着各种新技术的实施，它还专注于采用更好的运营流程和增强客户体验。',
  recommend: ['智盈', '讯盈']
}

const solutionList = reactive([
  {
    title: '制造行业',
    imgUrl: imgZ,
    active: true,
    to: 'solutionDetails/bulkMaterials'
  },
  {
    title: '能源行业',
    imgUrl: imgN,
    active: false,
    to: 'solutionDetails/energy'
  },
  {
    title: '软件行业',
    imgUrl: imgR,
    active: false,
    to: 'solutionDetails/software'
  }
])

const showText = ref(item0)

const toPath = ref('solutionDetails/bulkMaterials')
const chooseMenu = (el, i) => {
  toPath.value = el.to
  // loading.value = true
  showText.value = getShowText(i)
  solutionList.map(el => (el.active = false))
  solutionList[i].active = true
  // window.setTimeout(() => {
  //   loading.value = false
  // }, 300)
}

const getShowText = i => {
  let obj = {
    0: item0,
    1: item1,
    2: item2
  }
  return obj[i]
}

let isContactShow = ref(false)
let contactRef = ref(null)

function openDialog() {
  isContactShow.value = true
  nextTick(() => {
    contactRef.value.dialogVisible = true
  })
}
</script>

<style lang="scss" scoped>
.group-3 {
  position: relative;

  .group-mask {
    width: 100%;
    height: 718px;
    background: #262626;
    opacity: 0.38;
  }

  .group-content {
    position: absolute;
    top: 0;
    padding: 60px 240px 0;

    .group-title {
      margin-bottom: 14px;
      font-size: 38px;
      font-weight: 500;
      color: #fff;
    }

    .group-desc {
      margin-bottom: 40px;
      font-size: 18px;
      color: #fff;
    }

    .section-1 {
      .menu-1 {
        padding: 20px;
        background: rgb(11 11 11 / 50%);
        border-radius: 10px;
        backdrop-filter: blur(4px);

        li {
          position: relative;
          width: 260px;
          height: 122px;
          padding-left: 16px;
          margin-bottom: 10px;
          font-size: 22px;
          font-weight: 400;
          line-height: 6;
          color: #fff;
          cursor: pointer;
          border-radius: 6px;

          img {
            position: absolute;
            top: 0;
            right: 0;
          }
        }

        .active {
          font-weight: 600;
          color: #fff;
          background: linear-gradient(315deg, #72dbff 0%, #46bdff 100%);
        }

        li:hover {
          font-weight: 600;
          color: #fff;
          background: linear-gradient(315deg, #72dbff 0%, #46bdff 100%);
        }
      }
    }

    .content-1 {
      margin-left: 34px;

      .content-title {
        margin-top: 40px;
        margin-bottom: 14px;
        font-size: 24px;
        font-weight: 600;
        color: #fff;
      }

      .content-desc {
        width: 830px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
      }

      .content-product {
        width: 830px;
        padding-bottom: 23px;
        margin-top: 100px;
        border-bottom: 1px solid #fff;

        .text-1 {
          font-size: 14px;
          font-weight: 500;
          color: #fff;
        }

        .content-btn {
          width: 61px;
          height: 26px;
          margin-right: 8px;
          font-size: 14px;
          font-weight: 500;
          line-height: 26px;
          color: #fff;
          text-align: center;
          background: rgb(255 255 255 / 19%);
          border-radius: 2px;
        }
      }
    }

    .content-list {
      display: flex;
      margin-top: 30px;

      li {
        width: 141px;
        height: 44px;
        margin-right: 30px;
        font-size: 14px;
        font-weight: 400;
        line-height: 44px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
      }

      .list-1 {
        background: #46bdff;
      }

      .list-2 {
        border: 1px solid #fff;
        opacity: 0.5;
      }

      .list-2:hover {
        opacity: 1;
      }

      .list-1:hover {
        background: #5cc5ff;
      }
    }
  }
}
</style>
